<template>
  <van-nav-bar
    :title="navTitle"
    :left-arrow="isRouteBack"
    :right-text="$route.meta.right_text"
    fixed
  />
  <div class="ui-main">
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>
  <van-tabbar route v-if="$route.meta.tabbar">
    <van-tabbar-item
      v-for="item of tabRouteMap"
      :key="item.path"
      :icon="item.meta.icon"
      :to="item.path"
    >
      {{ item.meta.title }}
    </van-tabbar-item>
  </van-tabbar>
</template>

<script lang="ts">
import { ref, watch, defineComponent, Ref, onMounted, computed } from "vue";
import { RouteRecordRaw, useRoute } from "vue-router";
export default defineComponent({
  name: "basic",
  setup() {
    const route = useRoute();
    const isRouteBack: Ref = ref(null);
    const tabRouteMap: Ref = ref(null);
    const hiddenBarList = ["/user/login"];
    const isHideBar = computed(() => hiddenBarList.includes(route.path));
    const filterRoute = () => {
      let len = route.path.split("/").length;
      if (len >= 2) {
        isRouteBack.value = true;
      } else {
        isRouteBack.value = false;
      }
    };
    const getTabRouteMap = () => {
      let matched = route.matched.find(
        (item: RouteRecordRaw) => item.path === "/"
      )?.children;
      matched = matched?.filter(
        (item: RouteRecordRaw) =>
          item.meta && item.meta.title && item.meta.tabbar
      );
      tabRouteMap.value = matched;
    };
    const navTitle = computed(() => route.query.cityname || route.meta.title);

    watch(route, filterRoute);

    onMounted(() => {
      filterRoute();
      getTabRouteMap();
    });

    return {
      isRouteBack,
      tabRouteMap,
      isHideBar,
      navTitle,
    };
  },
});
</script>

<style scoped>

</style>